/*
*   @Author: 1296
*   @Date: 2025-03-15
*   @Description: 跳转布局
*/

<template>
  <transition name="fade">
    <div v-if="showLayout" class="redirect-layout">
      <div class="loading-container">
        <div class="loading-spinner"></div>
        <div class="loading-text">
          {{ $t('loading') }}{{ dots }}
        </div>
        <div class="target-url" v-if="showUrl">{{ $t('goto') }}{{ formattedUrl }}</div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'RedirectLayout',
  props: {
    targetUrl: {
      type: String,
      required: true
    },
    delay: {
      type: Number,
      default: 2000
    },
    showUrl: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      showLayout: true,
      dots: '.',
      dotsInterval: null
    }
  },
  computed: {
    formattedUrl() {
      try {
        return new URL(this.targetUrl).hostname
      } catch {
        return this.targetUrl
      }
    }
  },
  mounted() {
    this.dotsInterval = setInterval(() => {
      this.dots = this.dots.length >= 3 ? '.' : this.dots + '.'
    }, 500)
    setTimeout(() => {
      window.location.href = this.targetUrl
    }, this.delay)
  },
  beforeUnmount() {
    clearInterval(this.dotsInterval)
  }
}
</script>

<style scoped>
.redirect-layout {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0.98);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(5px);
}

.loading-container {
  text-align: center;
  max-width: calc(400 / 1920 * 100vw);
  padding: 2rem;
}

.loading-spinner {
  width: calc(60 / 1920 * 100vw);
  height: calc(60 / 1920 * 100vw);
  margin: 0 auto 20px;
  border: 4px solid #f0f0f0;
  border-top-color: #42b983;
  border-radius: 50%;
  animation: spin 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

.loading-text {
  color: #2c3e50;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

.target-url {
  color: #7f8c8d;
  font-size: 0.9rem;
  word-break: break-all;
  max-width: 100%;
  margin: 0 auto;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.4s ease-out;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>